<template>
	<view class="box bg_f2">
		<view class="top_wrapper bg_f2">
			<view class="top_block" @click="get_block(item)" :class="{'active': item.id == top_tab_active}"
				v-for="(item, index) in top_tab_list" :key="index">
				<view class="top_block_text">
					<view class="font_31">{{item.name}}</view>
					<view></view>
				</view>
				<view class="line bg_d2" v-if="index !== 2"></view>
			</view>
		</view>
		<view v-if="is_load">
			<image src="../../static/image/user/j@2x.png" class="no_data" v-if="data_list.length === 0"></image>
			<view class="content hidden" v-else>
				<view class="list" v-for="(item, index) in data_list" :key="item.id">
					<view class="list_circle_left"></view>
					<view class="list_circle_right"></view>
					<view class="list_top bg_fff hidden">
						<view class="font_35 text_bold list_title" style="display: flex; align-items: center; justify-content: space-between;">
              {{item.status_text}}
              <view class="flex-bect">
                
                <!-- <navigator :url="'./detail?type=1&id=' + item.id" class="btn3 on" v-if="item.status == 1">退款</navigator> -->
                <navigator :url="'./detail?type=2&id=' + item.id" class="btn3 on" v-if="item.status == 1">拍照寄存</navigator>
                <navigator :url="'/pages/index/order?id='+item.store_id+'&tuik=1'+'&order='+item.id" class="btn3 on" v-if="item.status == 1">修改订单</navigator>
                <view v-if="item.renew_deposit === 1"  class="btn3">续存</view>
              </view>
            </view>
						<view class="flex1 color_7b font_29 order_m1">
							<view v-if="item.status == 1" class="flex1">
								<view>寄存码：</view>
								<view>{{item.check_code}}</view>
							</view>
							<view v-else class="flex1">
								<view>取件码：</view>
								<view>{{item.collect_code}}</view>
							</view>
						</view>
						<view class="flex1 color_7b font_29 order_m1">
							<view>寄存门店：</view>
							<view class="w_flex1">{{item.store.store_name}}</view>
						</view>
						<view class="flex1 color_7b font_29 order_m1">
							<view>地<text style="color: #fff;">空空</text>址：</view>
							<!-- <view class="w_flex1">{{item.store.address}}</view> -->
              <view class="w_flex1">{{item.store.address}}</view>
              <view class="wrapper_right font_23 color_7b" @click="get_map(item)">导航</view>
						</view>
						<view class="flex1 color_7b font_29 order_m1">
							<view>联系方式：</view>
							<view class="w_flex1">{{item.store.mobile}}</view>
							<view class="wrapper_right font_23 color_7b" @click="get_phone(item)">拨号</view>
						</view>
					</view>
					<view class="hidden bg_fa list_top flex8">
						<view class="flex1 color_7b font_29 order_m1">
							<view>订单编号：</view>
							<view>{{item.order_no}}</view>
						</view>
						<view @click="linkToDetail(index,'./detail?id=' + item.id)" hover-class="none" class="btn1">查看详情</view>
					</view>
				</view>
				<view class="flex7 font_27 color_999" style="height: 100rpx;">{{Text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				Text: '',
				data_list: [],
				is_load: false,
				top_tab_active: 0,
				is_last_page: false,
				top_tab_list: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '待存放'
				}, {
					id: 2,
					name: '待取件'
				}],
				now_time: new Date().getTime(),
        upIdx:''
			}
		},
		onLoad() {
			// getApp().get_loading();
			// this.getMyOrdersList();
		},
		onShow() {
      if(uni.getStorageSync('upOrder') == 1){
        this.page = 1;
        this.data_list = [];
        getApp().get_loading();
        this.getMyOrdersList();
      }
      console.log('this.upIdx===>',this.upIdx)
      if(this.upIdx !== ''){
       this.getOrdersDetail() 
      }
		},
		onReachBottom() { //上拉加载
			if (!this.is_last_page) {
				this.page++;
				this.Text = '加载中...';
				this.getMyOrdersList();
			}
		},
		methods: {
      linkToDetail(i,url){
        this.upIdx = i;
        console.log('this.upIdx==============================>',this.upIdx)
        uni.navigateTo({
          url:url
        })
      },
      getOrdersDetail() {
      	let that = this;
        const data_list = JSON.parse(JSON.stringify(that.data_list))
      	this.$http.get(this.$api.getMyOrdersDetail, {
      		order_id: that.data_list[that.upIdx].id,
      		'scene':true,
      	}).then(res => {
      		data_list[that.upIdx] = res.data;
          that.data_list = data_list;
      	})
      },
      // 导航
      get_map(item) {
      	let self = this;
        if (!item.is_nav_mobile) return getApp().get_msg('导航仅在订单寄存当天可以查看');
      	// if (item.status == 3) {
      	// 	// 订单已完成
      	// 	uni.openLocation({ //​ 使用微信内置地图查看位置。
      	// 		latitude: Number(item.store.lat), //要去的纬度-地址
      	// 		longitude: Number(item.store.lng), //要去的经度-地址
      	// 		name: item.store.store_name,
      	// 		address: ''
      	// 	})
      	// 	return
      	// }
      	console.log('item====================>',item)
      
      	uni.openLocation({ //​ 使用微信内置地图查看位置。
      		latitude: Number(item.store.lat), //要去的纬度-地址
      		longitude: Number(item.store.lng), //要去的经度-地址
      		name: item.store.store_name,
      		address: ''
      	})
      },
			getMyOrdersList() {
        uni.setStorageSync('upOrder',0)
				this.$http.post(this.$api.getMyOrdersList, {
					status: this.top_tab_active,
					page: this.page,
					scene:true,
				}).then(res => {
					this.is_load = true;
          if(res.data.data){
            this.data_list = this.data_list.concat(res.data.data);
            uni.hideLoading()
          }

					if (this.page == res.data.last_page) {
						this.is_last_page = true;
						this.Text = '已加载全部'
					} else {
						this.is_last_page = false;
					}
				})
			},
			get_block(e) {
				this.Text = '';
				this.page = 1;
				this.data_list = [];
				this.top_tab_active = e.id;

				getApp().get_loading();
				this.getMyOrdersList();
			},
			// 拨号
			get_phone(item) {
        if (!item.is_nav_mobile) return getApp().get_msg('电话仅在订单寄存当天可以查看');
				let e = item.store.mobile;
				// if (item.status == 3) {
				// 	// 订单已完成
				// 	uni.makePhoneCall({
				// 		phoneNumber: e
				// 	});
				// 	return
				// }
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			get_now_time(item) {
				let a_ = item.start_time;
				let b_ = item.end_time;
				// 开始时间戳
				let a_time = new Date(a_.replace('年','/').replace('月','/').replace('日','')).getTime();
				// 结束时间戳 转换成晚上23：59：59
				let b_time = new Date(b_.replace('年','/').replace('月','/').replace('日','')).getTime();
				b_time = b_time + 86400000*1.5;
				// 现在时间戳
				this.now_time = new Date().getTime();
				if (this.now_time <= b_time && this.now_time >= a_time) {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("/static/css/top.css");
  .btn3{
    display: flex; align-items: center; justify-content: center;height: 50rpx; padding: 0 16rpx; color: #FF6A00;  margin-left: 16rpx; font-weight: normal; font-size: 24rpx;
    &.on{border-radius: 40rpx; border: 1px solid #FF6A00;}
  }
	.box {
		box-sizing: border-box;
		padding: 106rpx 0 0;
	}

	.order_m1 {
		margin: 22rpx 0;
	}

	.no_data {
		width: 492rpx;
		height: 414rpx;
		margin: 240rpx auto 0;
	}

	.list {
		width: 704rpx;
		border-radius: 33rpx;
		overflow: hidden;
		margin: 0 auto 19rpx;
		position: relative;

		&:last-child {
			margin-bottom: 50rpx;
		}

		.list_top {
			padding: 0 25rpx;
		}

		.list_title {
			margin: 31rpx 0 33rpx;
		}

		.list_circle_left,
		.list_circle_right {
			width: 31rpx;
			height: 31rpx;
			bottom: 68rpx;
			position: absolute;
			border-radius: 50%;
			background-color: #F2F2F2;
		}

		.list_circle_left {
			left: -15rpx;
		}

		.list_circle_right {
			right: -15rpx;
		}
	}

	.btn1 {
		color: #FF6A00;
		width: 170rpx;
		height: 58rpx;
		margin: 12rpx 0;
		box-shadow: none;
		font-size: 27rpx;
		background: #fff;
		border: 1px solid #FF6A00;
	}

	.wrapper_right {
		height: 33rpx;
		margin-left: 21rpx;
		padding: 4rpx 23rpx;
		border-radius: 23rpx;
		border: 2rpx solid #707070;
	}
</style>
